<template>
    <el-menu
      :collapse = "isCollapse"
      :default-active="$route.path"
      class="el-menu-vertical-demo"
      background-color="black"
      text-color="#fff"
      active-text-color="#ffd04b"
      router>
        <!-- 渲染数据有两种方式 有子菜单和没有子菜单的
                如何操作:最简单的方式是,使用计算属性来判断一下,有没有子菜单
         -->
        <el-menu-item  :index="item.path" v-for="item in noChildren" :key="item.name"
            @click="clcikMenu(item)">
            <i :class="'el-icon-'+item.icon"></i>
            <span slot="title">{{item.label}}</span>
        </el-menu-item>
        
        <el-submenu index="" v-for="item in hasChildren" :key="item.name">
            <template slot="title">
            <i :class="'el-icon-'+item.icon"></i>
            <span>{{item.label}}</span>
            </template>
            <el-menu-item-group>
                <el-menu-item :index="sub.path" v-for="sub in item.children" 
                :key="sub.name" @click="clcikMenu(sub)">
                    <i :class="'el-icon-'+sub.icon"></i>
                    <span slot="title">{{sub.label}}</span>
                </el-menu-item>
            </el-menu-item-group>
        </el-submenu>
    </el-menu>
</template>
<script>
    export default {
        computed: {
            //通过计算属性来判断一下,有没有子菜单
            noChildren(){//没有子菜单
                return this.menu.filter(item => !item.children)
            },
            hasChildren(){//有子菜单
                return this.menu.filter(item => item.children)
            },
            isCollapse(){
                //这里的数据是从vuex中拿到的
                return this.$store.state.tab.isCollapse
            }
        },
        methods: {
            clcikMenu(item){
                //调用vuex中的selectMenu方法存储数据
                this.$store.commit('selectMenu',item)
            }
        },

        /* 此处数据可由后端接口传递 */
        data(){
            return{
                menu:[
                    {
                        path:'/home',
                        label:'首页',
                        name:'home',
                        icon:'s-home'
                    },
                    {
                        path:'/user',
                        label:'用户管理',
                        name:'user',
                        icon:'user-solid'
                    },
                    {
                        path:'/course',
                        label:'课程管理',
                        name:'course',
                        icon:'s-management'
                    },
                    {
                        label:'其他',
                        icon:'s-tools',
                        children:[
                            {
                                path:'/page1',
                                label:'页面1',
                                name:'page1',
                                icon:'s-flag'
                            },
                            {
                                path:'/page2',
                                label:'页面2',
                                name:'page2',
                                icon:'s-comment'
                            }
                        ]
                    }
                ]
            }
        }
    }
</script>

<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>